<template>
  <div v-if="show">
    <el-form label-position="top"
             size="small"
             :model="data">
      <el-form-item :label="$t('fm.config.widget.model')">
        <el-input v-model="data.model"></el-input>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.dataSign')"
                    v-if="
          data.type == 'radio' ||
          data.type == 'checkbox' ||
          data.type == 'cascader' ||
          data.type == 'select'
        ">
        <!-- <p>{{data.type}}</p> -->
        <el-input v-model="data.dataSign"
                  placeholder="请输入数据标识"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.name')"
                    v-if="data.type != 'grid' && data.type != 'tabs'">
        <el-input v-model="data.name"></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('fm.config.widget.width')" v-if="Object.keys(data.options).indexOf('width')>=0">
        <el-input v-model="data.options.width"></el-input>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.height')" v-if="Object.keys(data.options).indexOf('height')>=0">
        <el-input v-model="data.options.height"></el-input>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.size')" v-if="Object.keys(data.options).indexOf('size')>=0">
        {{$t('fm.config.widget.width')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.width"></el-input>
        {{$t('fm.config.widget.height')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.height"></el-input>
      </el-form-item>  -->

      <el-form-item :label="$t('fm.config.widget.labelWidth')"
                    v-if="
          Object.keys(data.options).indexOf('labelWidth') >= 0 &&
          !data.options.tableColumn
        ">
        <el-checkbox v-model="data.options.isLabelWidth"
                     style="margin-right: 5px">{{ $t("fm.config.widget.custom") }}</el-checkbox>
        <el-input-number v-model="data.options.labelWidth"
                         :disabled="!data.options.isLabelWidth"
                         :min="0"
                         :max="99999"
                         :step="10"></el-input-number>
      </el-form-item>

      <!--<el-form-item :label="$t('fm.config.widget.placeholder')" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' && data.type!='date')">
        <el-input v-model="data.options.placeholder"></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('fm.config.widget.layout')"
                    v-if="Object.keys(data.options).indexOf('inline') >= 0">
        <el-radio-group v-model="data.options.inline">
          <el-radio-button :label="false">{{
            $t("fm.config.widget.block")
          }}</el-radio-button>
          <el-radio-button :label="true">{{
            $t("fm.config.widget.inline")
          }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.contentPosition')"
                    v-if="Object.keys(data.options).indexOf('contentPosition') >= 0">
        <el-radio-group v-model="data.options.contentPosition">
          <el-radio-button label="left">{{
            $t("fm.config.widget.left")
          }}</el-radio-button>
          <el-radio-button label="center">{{
            $t("fm.config.widget.center")
          }}</el-radio-button>
          <el-radio-button label="right">{{
            $t("fm.config.widget.right")
          }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.showInput')"
                    v-if="Object.keys(data.options).indexOf('showInput') >= 0">
        <el-switch v-model="data.options.showInput"></el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.min')"
                    v-if="Object.keys(data.options).indexOf('min') >= 0">
        <el-input-number v-model="data.options.min"
                         :min="-99999"
                         :max="99999"
                         :step="1"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.max')"
                    v-if="Object.keys(data.options).indexOf('max') >= 0">
        <el-input-number v-model="data.options.max"
                         :min="-99999"
                         :max="99999"
                         :step="1"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.step')"
                    v-if="Object.keys(data.options).indexOf('step') >= 0">
        <el-input-number v-model="data.options.step"
                         :min="-99999"
                         :max="99999"
                         :step="1"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.multiple')"
                    v-if="data.type == 'select' || data.type == 'imgupload'">
        <el-switch v-model="data.options.multiple"
                   @change="handleSelectMuliple"></el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.filterable')"
                    v-if="data.type == 'select'">
        <el-switch v-model="data.options.filterable"></el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.allowHalf')"
                    v-if="Object.keys(data.options).indexOf('allowHalf') >= 0">
        <el-switch v-model="data.options.allowHalf"> </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.showAlpha')"
                    v-if="Object.keys(data.options).indexOf('showAlpha') >= 0">
        <el-switch v-model="data.options.showAlpha"> </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.showLabel')"
                    v-if="Object.keys(data.options).indexOf('showLabel') >= 0">
        <el-switch v-model="data.options.showLabel"> </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.option')"
                    v-if="Object.keys(data.options).indexOf('options') >= 0">
        <!-- <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
          <el-radio-button :label="false">{{$t('fm.config.widget.staticData')}}</el-radio-button>
          <el-radio-button :label="true">{{$t('fm.config.widget.remoteData')}}</el-radio-button>
        </el-radio-group> -->
        <template v-if="data.options.remote">
          <div>
            <el-radio-group v-model="data.options.remoteType">
              <el-radio label="option">{{
                $t("fm.config.widget.remoteAssigned")
              }}</el-radio>
              <el-radio label="func">{{
                $t("fm.config.widget.remoteFunc")
              }}</el-radio>
            </el-radio-group>
            <el-input size="mini"
                      v-if="data.options.remoteType == 'option'"
                      v-model="data.options.remoteOption"
                      style="margin-bottom: 5px">
            </el-input>
            <el-input size="mini"
                      v-if="data.options.remoteType == 'func'"
                      v-model="data.options.remoteFunc"
                      style="margin-bottom: 5px">
            </el-input>
            <el-input size="mini"
                      v-model="data.options.props.value">
              <div style="width: 30px"
                   slot="prepend">
                {{ $t("fm.config.widget.value") }}
              </div>
            </el-input>
            <el-input size="mini"
                      v-model="data.options.props.label">
              <div slot="prepend"
                   style="width: 30px">
                {{ $t("fm.config.widget.label") }}
              </div>
            </el-input>
          </div>
        </template>
        <template v-else>
          <template v-if="
              data.type == 'radio' ||
              (data.type == 'select' && !data.options.multiple)
            ">
            <el-radio-group v-model="data.options.defaultValue">
              <draggable tag="ul"
                         :list="data.options.options"
                         v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item',
                }"
                         handle=".drag-item">
                <li v-for="(item, index) in data.options.options"
                    :key="index">
                  <el-radio :label="item.value"
                            style="margin-right: 5px">
                    <el-input :style="{
                        width: data.options.showLabel ? '90px' : '180px',
                      }"
                              size="mini"
                              v-model="item.value"></el-input>
                    <el-input style="width: 90px"
                              size="mini"
                              v-if="data.options.showLabel"
                              v-model="item.label"></el-input>
                    <!-- <input v-model="item.value"/> -->
                  </el-radio>
                  <i class="drag-item"
                     style="font-size: 16px; margin: 0 5px; cursor: move"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)"
                             circle
                             plain
                             type="danger"
                             size="mini"
                             icon="el-icon-minus"
                             style="padding: 4px; margin-left: 5px"></el-button>
                </li>
              </draggable>
            </el-radio-group>
          </template>

          <template v-if="
              data.type == 'checkbox' ||
              (data.type == 'select' && data.options.multiple)
            ">
            <el-checkbox-group v-model="data.options.defaultValue">
              <draggable tag="ul"
                         :list="data.options.options"
                         v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item',
                }"
                         handle=".drag-item">
                <li v-for="(item, index) in data.options.options"
                    :key="index">
                  <el-checkbox :label="item.value"
                               style="margin-right: 5px">
                    <el-input :style="{
                        width: data.options.showLabel ? '90px' : '180px',
                      }"
                              size="mini"
                              v-model="item.value"></el-input>
                    <el-input style="width: 90px"
                              size="mini"
                              v-if="data.options.showLabel"
                              v-model="item.label"></el-input>
                  </el-checkbox>
                  <i class="drag-item"
                     style="font-size: 16px; margin: 0 5px; cursor: move"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)"
                             circle
                             plain
                             type="danger"
                             size="mini"
                             icon="el-icon-minus"
                             style="padding: 4px; margin-left: 5px"></el-button>
                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <div style="margin-left: 22px">
            <el-button type="text"
                       @click="handleAddOption">{{ $t("fm.actions.addOption") }}添加数据</el-button>
          </div>
        </template>
      </el-form-item>

      <!-- <el-form-item :label="$t('fm.config.widget.remoteData')" v-if="data.type=='cascader'">
        <div>
          <el-radio-group v-model="data.options.remoteType">
            <el-radio label="option">{{$t('fm.config.widget.remoteAssigned')}}</el-radio>
            <el-radio label="func">{{$t('fm.config.widget.remoteFunc')}}</el-radio>
          </el-radio-group>
          <el-input size="mini" v-if="data.options.remoteType == 'option'" v-model="data.options.remoteOption" style="margin-bottom: 5px;">
          </el-input>
          <el-input size="mini" v-if="data.options.remoteType == 'func'" v-model="data.options.remoteFunc" style="margin-bottom: 5px;">
          </el-input>
          <el-input size="mini" style="" v-model="data.options.props.value">
            <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
          </el-input>
          <el-input size="mini" style="" v-model="data.options.props.label">
            <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
          </el-input>
          <el-input size="mini" style="" v-model="data.options.props.children">
            <template slot="prepend">{{$t('fm.config.widget.childrenOption')}}</template>
          </el-input>
        </div>
      </el-form-item> -->

      <el-form-item :label="$t('fm.config.widget.defaultValue')"
                    v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
          (data.type == 'text' ||
            data.type == 'textarea' ||
            data.type == 'input' ||
            data.type == 'number' ||
            data.type == 'rate' ||
            data.type == 'color' ||
            data.type == 'switch' ||
            data.type == 'html')
        ">
        <el-input v-if="data.type == 'textarea'"
                  type="textarea"
                  :rows="5"
                  v-model="data.options.defaultValue"></el-input>

        <template v-if="data.type == 'input' || data.type == 'text'">
          <template v-if="
              data.options.dataType == 'number' ||
              data.options.dataType == 'integer' ||
              data.options.dataType == 'float'
            ">
            <el-input type="number"
                      v-model.number="data.options.defaultValue"></el-input>
          </template>
          <template v-else>
            <el-input v-model="data.options.defaultValue"></el-input>
          </template>
        </template>

        <el-rate v-if="data.type == 'rate'"
                 style="display: inline-block; vertical-align: middle"
                 :max="data.options.max"
                 :allow-half="data.options.allowHalf"
                 v-model="data.options.defaultValue"></el-rate>
        <el-button type="text"
                   v-if="data.type == 'rate'"
                   style="
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
          "
                   @click="data.options.defaultValue = 0">{{ $t("fm.actions.clear") }}</el-button>
        <el-color-picker v-if="data.type == 'color'"
                         v-model="data.options.defaultValue"
                         :show-alpha="data.options.showAlpha"></el-color-picker>
        <el-switch v-if="data.type == 'switch'"
                   v-model="data.options.defaultValue"></el-switch>
        <el-input-number v-if="data.type == 'number'"
                         v-model="data.options.defaultValue"
                         :step="data.options.step"
                         :min="data.options.min"
                         :max="data.options.max"></el-input-number>

        <template v-if="data.type == 'html'">
          <div id="codeeditor"
               style="height: 100px; width: 100%">
            {{ data.options.defaultValue }}
          </div>
          <code-editor :key="data.key"
                       v-model="data.options.defaultValue"
                       height="200px"></code-editor>
        </template>
      </el-form-item>

      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item :label="$t('fm.config.widget.showType')"
                      v-if="data.type == 'date'">
          <el-select v-model="data.options.type">
            <el-option value="year"></el-option>
            <el-option value="month"></el-option>
            <el-option value="date"></el-option>
            <el-option value="dates"></el-option>
            <!-- <el-option value="week"></el-option> -->
            <el-option value="datetime"></el-option>
            <el-option value="datetimerange"></el-option>
            <el-option value="daterange"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isRange')"
                      v-if="data.type == 'time'">
          <el-switch v-model="data.options.isRange"> </el-switch>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isTimestamp')"
                      v-if="data.type == 'date'">
          <el-switch v-model="data.options.timestamp"> </el-switch>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.placeholder')"
                      v-if="
            (!data.options.isRange && data.type == 'time') ||
            (data.type != 'time' &&
              data.options.type != 'datetimerange' &&
              data.options.type != 'daterange')
          ">
          <el-input v-model="data.options.placeholder"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.startPlaceholder')"
                      v-if="
            data.options.isRange ||
            data.options.type == 'datetimerange' ||
            data.options.type == 'daterange'
          ">
          <el-input v-model="data.options.startPlaceholder"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.endPlaceholder')"
                      v-if="
            data.options.isRange ||
            data.options.type == 'datetimerange' ||
            data.options.type == 'daterange'
          ">
          <el-input v-model="data.options.endPlaceholder"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.format')">
          <el-input v-model="data.options.format"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.defaultValue')"
                      v-if="
            data.type == 'time' &&
            Object.keys(data.options).indexOf('isRange') >= 0
          ">
          <el-time-picker key="1"
                          style="width: 100%"
                          v-if="!data.options.isRange"
                          v-model="data.options.defaultValue"
                          :arrowControl="data.options.arrowControl"
                          :value-format="data.options.format">
          </el-time-picker>
          <el-time-picker key="2"
                          v-if="data.options.isRange"
                          style="width: 100%"
                          v-model="data.options.defaultValue"
                          is-range
                          :arrowControl="data.options.arrowControl"
                          :value-format="data.options.format">
          </el-time-picker>
        </el-form-item>
      </template>

      <template v-if="data.type == 'imgupload' || data.type == 'fileupload'">
        <el-form-item :label="$t('fm.config.widget.limit')">
          <el-input type="number"
                    v-model.number="data.options.limit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tip')"
                      v-if="Object.keys(data.options).indexOf('tip') >= 0">
          <el-input v-model="data.options.tip"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isQiniu')">
          <el-switch v-model="data.options.isQiniu"></el-switch>
        </el-form-item>
        <template v-if="data.options.isQiniu">
          <el-form-item label="Domain"
                        :required="true">
            <el-input v-model="data.options.domain"></el-input>
          </el-form-item>
          <el-form-item :label="$t('fm.config.widget.tokenFunc')"
                        :required="true">
            <el-input v-model="data.options.tokenFunc"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item :label="$t('fm.config.widget.action')"
                        :required="true">
            <el-input v-model="data.options.action"></el-input>
          </el-form-item>
          <el-form-item :label="$t('fm.config.widget.headers')">
            <ul>
              <li v-for="(item, index) in data.options.headers"
                  :key="index"
                  style="margin-bottom: 5px">
                <el-input type="textarea"
                          clearable
                          :rows="1"
                          placeholder="KEY"
                          size="mini"
                          style="width: 100px; margin-right: 5px"
                          v-model="item.key"></el-input>

                <el-input type="textarea"
                          clearable
                          :rows="1"
                          placeholder="VALUE"
                          size="mini"
                          style="width: 140px"
                          v-model="item.value"></el-input>

                <el-button @click="handleOptionsRemove(index)"
                           circle
                           plain
                           type="danger"
                           size="mini"
                           icon="el-icon-minus"
                           style="padding: 4px; margin-left: 5px"></el-button>
              </li>
            </ul>
            <div>
              <el-button type="text"
                         @click="handleAddHeader">{{
                $t("fm.actions.add")
              }}</el-button>
            </div>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type == 'blank'">
        <el-form-item :label="$t('fm.config.widget.defaultType')">
          <el-select v-model="data.options.defaultType">
            <el-option value="String"
                       :label="$t('fm.config.widget.string')"></el-option>
            <el-option value="Object"
                       :label="$t('fm.config.widget.object')"></el-option>
            <el-option value="Array"
                       :label="$t('fm.config.widget.array')"></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'grid'">
        <el-form-item :label="$t('fm.config.widget.gutter')">
          <el-input type="number"
                    v-model.number="data.options.gutter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.flex')">
          <el-switch v-model="data.options.flex"></el-switch>
        </el-form-item>
        <!-- responsive -->
        <el-form-item :label="$t('fm.config.widget.responsive')">
          <el-switch v-model="data.options.responsive"></el-switch>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.columnOption')">
          <draggable tag="ul"
                     :list="data.columns"
                     v-bind="{
              group: { name: 'options' },
              ghostClass: 'ghost',
              handle: '.drag-item',
            }"
                     handle=".drag-item">
            <li v-for="(item, index) in data.columns"
                :key="index">
              <i class="drag-item"
                 style="font-size: 16px; margin: 0 5px; cursor: move"><i class="iconfont icon-icon_bars"></i></i>

              <el-input v-if="!data.options.responsive"
                        :placeholder="$t('fm.config.widget.span')"
                        size="mini"
                        style="width: 100px"
                        type="number"
                        v-model.number="item.span"></el-input>

              <template v-if="data.options.responsive">
                <div style="display: inline-block">
                  <div style="
                      display: flex;
                      flex-direction: column;
                      margin: 0 10px 10px 10px;
                    ">
                    <span>
                      <span style="width: 25px; display: inline-block">xs:
                      </span>
                      <el-input placeholder="xs"
                                size="mini"
                                style="width: 100px"
                                type="number"
                                v-model.number="item.xs"></el-input>
                      <pre style="
                          width: 55px;
                          display: inline;
                          color: #999;
                          margin-left: 5px;
                        "
                           v-html="'<768px'"></pre>
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block">sm:
                      </span>
                      <el-input placeholder="sm"
                                size="mini"
                                style="width: 100px"
                                type="number"
                                v-model.number="item.sm"></el-input>
                      <pre style="
                          width: 55px;
                          display: inline;
                          color: #999;
                          margin-left: 5px;
                        "
                           v-html="'≥768px'"></pre>
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block">md:
                      </span>
                      <el-input placeholder="md"
                                size="mini"
                                style="width: 100px"
                                type="number"
                                v-model.number="item.md"></el-input>
                      <pre style="
                          width: 55px;
                          display: inline;
                          color: #999;
                          margin-left: 5px;
                        "
                           v-html="'≥992px'"></pre>
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block">lg:
                      </span>
                      <el-input placeholder="lg"
                                size="mini"
                                style="width: 100px"
                                type="number"
                                v-model.number="item.lg"></el-input>
                      <pre style="
                          width: 55px;
                          display: inline;
                          color: #999;
                          margin-left: 5px;
                        "
                           v-html="'≥1200px'"></pre>
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block">xl:
                      </span>
                      <el-input placeholder="xl"
                                size="mini"
                                style="width: 100px"
                                type="number"
                                v-model.number="item.xl"></el-input>
                      <pre style="
                          width: 55px;
                          display: inline;
                          color: #999;
                          margin-left: 5px;
                        "
                           v-html="'≥1920px'"></pre>
                    </span>
                  </div>
                </div>
              </template>

              <el-button @click="handleOptionsRemove(index)"
                         circle
                         plain
                         type="danger"
                         size="mini"
                         icon="el-icon-minus"
                         style="padding: 4px; margin-left: 5px"></el-button>
            </li>
          </draggable>
          <div style="margin-left: 22px">
            <el-button type="text"
                       @click="handleAddColumn">{{
              $t("fm.actions.addColumn")
            }}</el-button>
          </div>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.justify')"
                      v-if="data.options.flex">
          <el-select v-model="data.options.justify">
            <el-option value="start"
                       :label="$t('fm.config.widget.justifyStart')"></el-option>
            <el-option value="end"
                       :label="$t('fm.config.widget.justifyEnd')"></el-option>
            <el-option value="center"
                       :label="$t('fm.config.widget.justifyCenter')"></el-option>
            <el-option value="space-around"
                       :label="$t('fm.config.widget.justifySpaceAround')"></el-option>
            <el-option value="space-between"
                       :label="$t('fm.config.widget.justifySpaceBetween')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.align')"
                      v-if="data.options.flex">
          <el-select v-model="data.options.align">
            <el-option value="top"
                       :label="$t('fm.config.widget.alignTop')"></el-option>
            <el-option value="middle"
                       :label="$t('fm.config.widget.alignMiddle')"></el-option>
            <el-option value="bottom"
                       :label="$t('fm.config.widget.alignBottom')"></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'tabs'">
        <el-form-item :label="$t('fm.config.widget.type')">
          <el-radio-group v-model="data.options.type">
            <el-radio-button label="">{{
              $t("fm.config.widget.default")
            }}</el-radio-button>
            <el-radio-button label="card">{{
              $t("fm.config.widget.card")
            }}</el-radio-button>
            <el-radio-button label="border-card">{{
              $t("fm.config.widget.borderCard")
            }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tabPosition')">
          <el-radio-group v-model="data.options.tabPosition">
            <el-radio-button label="top">{{
              $t("fm.config.widget.top")
            }}</el-radio-button>
            <el-radio-button label="left">{{
              $t("fm.config.widget.left")
            }}</el-radio-button>
            <el-radio-button label="right">{{
              $t("fm.config.widget.right")
            }}</el-radio-button>
            <el-radio-button label="bottom">{{
              $t("fm.config.widget.bottom")
            }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tabOption')">
          <draggable tag="ul"
                     :list="data.tabs"
                     v-bind="{
              group: { name: 'options' },
              ghostClass: 'ghost',
              handle: '.drag-item',
            }"
                     handle=".drag-item">
            <li v-for="(item, index) in data.tabs"
                :key="index">
              <i class="drag-item"
                 style="font-size: 16px; margin: 0 5px; cursor: move"><i class="iconfont icon-icon_bars"></i></i>
              <el-input :placeholder="$t('fm.config.widget.tabName')"
                        size="mini"
                        style="width: 200px"
                        v-model="item.label"></el-input>

              <el-button @click="handleOptionsRemove(index)"
                         circle
                         plain
                         type="danger"
                         size="mini"
                         icon="el-icon-minus"
                         style="padding: 4px; margin-left: 5px"></el-button>
            </li>
          </draggable>
          <div style="margin-left: 22px">
            <el-button type="text"
                       @click="handleAddTab">{{
              $t("fm.actions.addTab")
            }}</el-button>
          </div>
        </el-form-item>
      </template>

      <el-form-item :label="$t('fm.config.widget.customClass')"
                    v-if="Object.keys(data.options).includes('customClass')">
        <el-input v-model="data.options.customClass"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="数据"
                    v-if="data.type == 'cascader'">
        <div class="block">
          <div style="display: flex">
            <p @click="append(dataList, '1', 'firstA')"
               style="cursor: pointer">
              <i class="el-icon-circle-plus-outline button"
                 :gutter="20">&nbsp;添加一级数据</i>
            </p>
            <el-upload ref="upload"
                       action="/wm/upload/"
                       :show-file-list="false"
                       :on-change="readExcel"
                       :auto-upload="false">
              <el-button slot="trigger"
                         size="mini"
                         icon="el-icon-upload"
                         type="primary">
                导入数据
              </el-button>
            </el-upload>
          </div>
          <el-tree :data="dataList"
                   node-key="id"
                   v-loading="loading"
                   :expand-on-click-node="false">
            <el-row class="custom-tree-node"
                    style="width: 100%"
                    slot-scope="{ node, data }">
              <el-col :span="18">{{ node.label }}</el-col>
              <el-col :span="6">
                <el-button type="text"
                           size="mini"
                           @click="() => append(data, '1', 'currentNode')">
                  新增
                </el-button>
                <el-button type="text"
                           size="mini"
                           @click="() => edit(node, data, '2')">
                  编辑
                </el-button>
                <el-button type="text"
                           size="mini"
                           @click="() => remove(node, data)">
                  删除
                </el-button>
              </el-col>
            </el-row>
          </el-tree>
        </div>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.attribute')">
        <el-checkbox v-model="data.options.dataBind"
                     v-if="
            Object.keys(data.options).indexOf('dataBind') >= 0 &&
            !data.options.tableColumn
          "
                     :disabled="data.type != 'blank'">{{ $t("fm.config.widget.dataBind") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.hidden"
                     v-if="
            Object.keys(data.options).indexOf('hidden') >= 0 &&
            !data.options.tableColumn
          ">{{ $t("fm.config.widget.hidden") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.readonly"
                     v-if="Object.keys(data.options).indexOf('readonly') >= 0">{{ $t("fm.config.widget.readonly") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.disabled"
                     v-if="Object.keys(data.options).indexOf('disabled') >= 0">{{ $t("fm.config.widget.disabled") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.editable"
                     v-if="Object.keys(data.options).indexOf('editable') >= 0">{{ $t("fm.config.widget.editable") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.clearable"
                     v-if="Object.keys(data.options).indexOf('clearable') >= 0">{{ $t("fm.config.widget.clearable") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.arrowControl"
                     v-if="Object.keys(data.options).indexOf('arrowControl') >= 0">{{ $t("fm.config.widget.arrowControl") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.isDelete"
                     v-if="Object.keys(data.options).indexOf('isDelete') >= 0">{{ $t("fm.config.widget.isDelete") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.isEdit"
                     v-if="Object.keys(data.options).indexOf('isEdit') >= 0">{{ $t("fm.config.widget.isEdit") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.showPassword"
                     v-if="Object.keys(data.options).indexOf('showPassword') >= 0">{{ $t("fm.config.widget.showPassword") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.showScore"
                     v-if="Object.keys(data.options).indexOf('showScore') >= 0">{{ $t("fm.config.widget.showScore") }}
        </el-checkbox>
        <el-checkbox v-model="data.options.chooseBeforeTime"
                     v-if="Object.keys(data.options).indexOf('chooseBeforeTime') >= 0">{{ $t("fm.config.widget.chooseBeforeTime") }}
        </el-checkbox>
      </el-form-item>

      <template v-if="
          data.type != 'grid' && data.type != 'tabs' && data.type != 'cascader'
        ">
        <el-form-item :label="$t('fm.config.widget.validate')">
          <div v-if="Object.keys(data.options).indexOf('required') >= 0">
            <el-checkbox v-model="data.options.required">{{
              $t("fm.config.widget.required")
            }}</el-checkbox>
          </div>
          <el-select v-if="Object.keys(data.options).indexOf('dataType') >= 0"
                     v-model="data.options.dataType"
                     size="mini">
            <el-option value="string"
                       :label="$t('fm.config.widget.string')"></el-option>
            <el-option value="number"
                       :label="$t('fm.config.widget.number')"></el-option>
            <el-option value="boolean"
                       :label="$t('fm.config.widget.boolean')"></el-option>
            <el-option value="integer"
                       :label="$t('fm.config.widget.integer')"></el-option>
            <el-option value="float"
                       :label="$t('fm.config.widget.float')"></el-option>
            <el-option value="url"
                       :label="$t('fm.config.widget.url')"></el-option>
            <el-option value="email"
                       :label="$t('fm.config.widget.email')"></el-option>
            <el-option value="hex"
                       :label="$t('fm.config.widget.hex')"></el-option>
          </el-select>

          <div v-if="Object.keys(data.options).indexOf('pattern') >= 0">
            <el-input size="mini"
                      v-model.lazy="data.options.pattern"
                      style="width: 240px"
                      :placeholder="$t('fm.config.widget.patternPlaceholder')"></el-input>
          </div>
        </el-form-item>
      </template>

      <el-button class="el-button el-button--primary el-button--medium h30Btn"
                 @click="submitForm">确定</el-button>
      <el-button class="el-button el-button--primary el-button--medium h30Btn"
                 @click="viewEffect">预览</el-button>
    </el-form>
    <!-- 级联数据新增时的弹框 -->
    <el-dialog v-dialogDrag
               :title="dialogTitle"
               :visible.sync="dialogFormVisible"
               width="40%">
      <el-row :gutter="20"
              :model="form">
        <el-col :span="12">
          <label>值：</label>
          <el-input v-model="form.value"
                    autocomplete="off"></el-input>
        </el-col>
        <el-col :span="12">
          <label>标签：</label>
          <el-input v-model="form.label"
                    autocomplete="off"></el-input>
        </el-col>
      </el-row>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitDialogForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--表单预览 -->
    <el-dialog v-dialogDrag
               title="预览效果"
               v-if="viewEffectShow"
               :visible.sync="viewEffectShow">
      <node-form v-model="jsonDatas"
                 :jsonData="jsonDatas"></node-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="viewEffectShowFun">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <div v-else
       class="empty">
    {{ $t("fm.description.configEmpty") }}
  </div>
</template>

<script>
let id = 100
import XLSX from "xlsx"
import nodeForm from "@/components/common/nodeForm";
import Draggable from 'vuedraggable'
import CodeEditor from './CodeEditor/index'
import fm from "./formData.js"
import common from "@/common/common.js";

export default {
  components: {
    Draggable,
    CodeEditor,
    nodeForm
  },
  props: ['data', 'dataListInfo', "configInfo", "effectShow"],
  data () {
    return {
      loading: false,
      currentNodeData: [],
      dataList: this.dataListInfo,
      formLabelWidth: '80px',
      dialogTitle: '新增数据',
      dialogFormVisible: false,
      viewEffectShow: false,
      form: {
        value: '',
        label: ""
      },
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      },
      jsonData: {
        list: [],
        config: ''
      },
      jsonDatas: ""
    }
  },
  computed: {
    show () {
      if (this.data && Object.keys(this.data).length > 0 && this.data.key) {
        return true
      }
      return false
    }
  },
  created () {
    this.getInfo()
  },
  mounted () {
  },
  methods: {
    viewEffectShowFun () {
      this.viewEffectShow = false
    },
    viewEffect () {
      this.jsonData.list[0] = this.data
      this.jsonData.config = this.configInfo
      this.jsonDatas = this.jsonData
      if (this.data.type == 'cascader') {
        this.jsonDatas.list[0].options.remoteOptions = this.dataList
      }
      this.viewEffectShow = true
    },
    // 组装数据
    convertToTreeData (data, pid) {
      return common.convertToTreeData(data, pid);
    },
    // 导入数据
    readExcel (file) {
      let _this = this
      _this.loading = true
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: 'binary',
          });
          const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets['Sheet1']);
          let sheetArrayNew = _this.convertToTreeData(sheetArray, '0')
          _this.dataList = sheetArrayNew
          setTimeout(() => {
            this.loading = false
          }, 1000);
        } catch (e) {
          this.$message.warning('文件类型不正确！');
          return false;
        }
      };
      fileReader.readAsBinaryString(file.raw);
    },
    // 新增
    append (data, typeValue, dataJi) {
      this.currentNodeData = data
      this.makeType = typeValue
      this.dataClass = dataJi
      this.dialogFormVisible = true
      this.form.value = ''
      this.form.label = ''
    },
    // 编辑
    edit (node, data, typeValue) {
      this.dialogTitle = '编辑数据'
      this.currentNodeData = data
      this.node = node
      this.makeType = typeValue
      this.form.value = data.value
      this.form.label = data.label
      this.dialogFormVisible = true
    },
    // 删除
    remove (node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.value === data.value);
      children.splice(index, 1);
    },
    submitDialogForm () {
      if (this.makeType !== '1') { // 编辑
        const parent = this.node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.value === this.currentNodeData.value);
        children[index].value = this.form.value
        children[index].label = this.form.label
      } else { // 新建
        const newChild = { id: id++, value: this.form.value, label: this.form.label }
        if (this.dataClass == 'firstA') {
          this.dataList.push(newChild);
        } else {
          if (!this.currentNodeData.children) {
            this.$set(this.currentNodeData, 'children', []);
          }
          this.currentNodeData.children.push(newChild);
        }
      }
      this.dialogFormVisible = false
      this.form.value = ''
      this.form.label = ''
      this.makeType = ''
    },
    //筛选空的children
    filtersChildren (data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children && data[i].children.length < 1) {
          delete data[i].children
        } else if (data[i].children && data[i].children.length > 0) {
          this.filtersChildren(data[i].children)
        }
      }
      return data
    },
    // 提交数据
    submitForm () {
      if (this.data.type == 'cascader') {
        this.dataList = this.filtersChildren(this.dataList)
        this.data.options.remoteOptions = this.dataList
      }
      if (this.data.type == 'fileupload' || this.data.type == 'imgupload') {
        this.data.options.defaultValue = []
      }
      this.$emit('getJsonData', this.data)
    },
    getInfo () {
      this.fm = fm.fm
    },
    handleOptionsRemove (index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else if (this.data.type === 'tabs') {
        this.data.tabs.splice(index, 1)
      } else if (this.data.type === 'imgupload' || this.data.type === 'fileupload') {
        this.data.options.headers.splice(index, 1)
      } else {
        if (!this.data.options.remote && this.data.options.options[index].value) {
          this.data.options.defaultValue = typeof this.data.options.defaultValue === 'string' ? '' : []
        }

        this.data.options.options.splice(index, 1)
      }

    },
    handleAddOption () {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption'),
          label: this.$t('fm.config.widget.newOption')
        })
      } else {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption')
        })
      }

    },
    handleAddColumn () {
      this.data.columns.push({
        span: '',
        list: []
      })
    },
    handleAddTab () {
      let length = this.data.tabs.length

      this.data.tabs.push({
        label: this.$t('fm.config.widget.tab') + (length + 1),
        name: 'tab_' + new Date().getTime(),
        list: []
      })
    },
    handleAddHeader () {
      if ('headers' in this.data.options) {
        this.data.options.headers.push({
          key: '',
          value: ''
        })
      } else {

        this.$set(this.data.options, 'headers', [{ key: '', value: '' }])
      }

    },
    generateRule () {
      this.data.rules = []
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleSelectMuliple (value) {
      if (value) {
        if (this.data.options.defaultValue) {
          this.data.options.defaultValue = [this.data.options.defaultValue]
        } else {
          this.data.options.defaultValue = []
        }

      } else {
        if (this.data.options.defaultValue.length > 0) {
          this.data.options.defaultValue = this.data.options.defaultValue[0]
        } else {
          this.data.options.defaultValue = ''
        }

      }
    },

    validateRequired (val) {
      if (val) {
        this.validator.required = { required: true, message: `${this.data.name}${this.$t('fm.config.widget.validatorRequired')}` }
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType (val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.type = { type: val, message: this.data.name + this.$t('fm.config.widget.validatorType') }
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern (val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.pattern = { pattern: val, message: this.data.name + this.$t('fm.config.widget.validatorPattern') }
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    }
  },
  watch: {
    jsonDatas (n, o) {
      this.jsonDatas = n
    },
    'data.options.isRange': function (val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue') >= 0)
            this.data.options.defaultValue = ''
        }
      }
    },
    'data.options.required': function (val) {
      this.validateRequired(val)
    },
    'data.options.dataType': function (val) {
      this.validateDataType(val)
    },
    'data.options.pattern': function (val) {
      this.valiatePattern(val)
    },
    'data.name': function (val) {
      if (this.data.options) {
        this.validateRequired(this.data.options.required)
        this.validateDataType(this.data.options.dataType)
        this.valiatePattern(this.data.options.pattern)
      }
    }
  }
}
</script>
<style scoped>
>>> .el-input {
  width: auto !important;
}
>>> .el-textarea {
  width: 60%;
}
</style>
